<template>
  <el-dialog
    title="修改目录"
    :visible.sync="resetDialogVisible"
    width="20%"
    @close="clearResetFrom"
    :before-close="handleClose"
  >
    <el-form
      :model="resetForm"
      :rules="rules"
      ref="resetForm"
      label-width="80px"
      class="demo-ruleForm"
    >
      <el-form-item label="所属学科" v-if="openSubjectSort">
        <el-select v-model="resetForm.subject" placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in selectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="row.subjectName ? '目录名称' : '标签名称'" prop="name">
        <el-input v-model="resetForm.name" :placeholder="row.subjectName ?'请输入目录名称':'请输入标签名称'"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="resetDirectory">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { resetDirectoryList, resetTags, gstSubList } from '@/assets/api/subjectManage.js';
export default {
  props: {
    bool: Boolean,
    row: Object,
    openSubjectSort: Boolean,
    id: String
  },
  data() {
    return {
      // 修改对话框的显隐
      resetDialogVisible: false,
      // 修改对话框的表单
      resetForm: {
        name: '',
        subject: ''
      },
      ID: parseInt(this.id),
      // 下拉菜单列表
      selectList: [],
      // 修改表单的规则
      rules: {
        name: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    if (this.openSubjectSort) {
      this.getSubList();
    }
  },
  methods: {
    // 获取下拉菜单列表
    async getSubList() {
      const { data } = await gstSubList();
      this.selectList = data;
    },
    // 关闭执行
    clearResetFrom() {
      this.$refs.resetForm.model.subject = '';
      this.$refs.resetForm.resetFields();
      this.$emit('offReset');
    },
    // 点x执行
    handleClose() {
      this.clearResetFrom();
    },
    // 点击确认修改执行
    async resetDirectory() {
      // 标签列表的修改
      if (this.row.directoryName === undefined) {
        try {
          if (this.openSubjectSort) {
            await resetTags({
              id: this.row.id,
              subjectID: this.$refs.resetForm.model.subject,
              tagName: this.resetForm.name
            });
          } else {
            await resetTags({
              id: this.row.id,
              subjectID: this.row.subjectID,
              tagName: this.resetForm.name
            });
          }
          this.$message.success('标签修改成功');
        } catch (err) {
          this.$message({
            message: '标签修改失败',
            type: 'error'
          });
        }
      }
      // 目录列表的修改
      if (this.row.tagName === undefined) {
        try {
          if (this.openSubjectSort) {
            await resetDirectoryList({
              id: this.row.id,
              subjectID: this.$refs.resetForm.model.subject,
              directoryName: this.resetForm.name
            });
          } else {
            await resetDirectoryList({
              id: this.row.id,
              subjectID: this.row.subjectID,
              directoryName: this.resetForm.name
            });
          }
          this.$message.success('目录修改成功');
        } catch (err) {
          this.$message({
            message: '目录修改失败',
            type: 'error'
          });
        }
      }
      this.$emit('offReset');
    }
  },
  watch: {
    bool(val) {
      this.resetDialogVisible = val;
    },
    row(val) {
      if (val.directoryName) {
        this.resetForm.name = val.directoryName;
        this.resetForm.subject = val.subjectName;
      } else {
        this.resetForm.name = val.tagName;
        this.resetForm.subject = val.subjectName;
      }
    }
  }
};
</script>

<style lang="less">
.el-dialog {
  border-radius: 10px;
  .el-dialog__header {
    background-color: #409eff;
    padding-top: 15px;
    color: #fff;
    border-radius: 10px 10px 0 0;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__close {
      color: #fff;
    }
  }
}
</style>
